@import "normalize.css/normalize"
@import "@fortawesome/fontawesome-free/css/all"
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Source+Code+Pro:ital,wght@0,400;0,900;1,400;1,900&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap")
@import _tokens

@import _admin
@import _charts
@import _filters
@import _fixed-at-bottom
@import _loading
@import _navigation
@import _popovers
@import _react-date-range-theme-overrides

html
  width: 100%
  height: 100%
  scroll-behavior: smooth

body
  width: 100%
  height: 100%
  background-color: $main-background
  color: $main-text-color
  font-family: $body-font, monospace
  line-height: 1.2

#__next
  width: 100%
  height: 100%  
  
main
  width: 100%
  min-height: 100%

main.use-sans-serif
  font-family: $sans-serif-body-font, sans-serif
  font-size: 18px

*
  box-sizing: border-box

*[title]
  cursor: pointer

button
  // Resets
  -webkit-appearance: none
  -moz-appearance: none
  background: transparent
  border: none
  text-align: left
  padding: 0
  cursor: pointer

h1, h1 a, h1 button
  font-family: $display-font, serif
  margin-top: 0
  color: $title-color
  text-decoration: none

  &:hover,
  &:focus
    text-decoration: none

a
  text-decoration: none
  color: $main-link-color

  &:hover,
  &:focus
    text-decoration: underline

header.page-header.timeline-page
  padding: 20px

header.page-header
  padding: 50px 20px

footer.page-footer
  padding: 20px

header.page-header,
footer.page-footer
  display: flex
  background-color: $header-footer-background
  justify-content: center
  align-items: center
  min-height: 80px
  width: 100%

  h1
    margin: 0

  .constrain-width
    max-width: 1440px

  p
    color: #eee

header.page-header .header-content,
footer.page-footer
  h1 a, h1 a:hover, h1 button, h1 button:hover
  border-bottom: none

  a
    border-bottom: 0.0625em dashed lighten($header-footer-background, 20%)
    color: $header-footer-link-color

    &:hover, &:focus
      border-bottom-style: solid
      text-decoration: none

  i.fa-rss
    padding-left: 10px

header.page-header.timeline-page
  position: relative
  padding-bottom: 0

  .constrain-width
    height: 100%
    display: flex
    flex-wrap: nowrap
    justify-content: space-between

  .logo-image-link, img.logo
    max-height: 250px
    display: block
    border: 0

  img.logo
    margin-left: -65px
    object-fit: contain

  .header-content
    padding: 0 30px
    align-self: center

  ul
    padding: 0px
    list-style: none

  li
    display: inline

    a
      border-bottom: none

footer.page-footer
  padding: 10px 10px

  .constrain-width p
    text-align: center

.inline-checkbox
  input[type="checkbox"]
    margin-right: 5px

div.content-wrapper
  display: flex
  min-height: calc(100vh - 215px)

  &.timeline-page
    display: block
    min-height: calc(100vh - 250px)

article.timeline
  min-height: calc(100vh - 400px)

.timeline, .single-timeline-wrapper
  position: relative
  width: 90%
  max-width: 1600px
  margin: 0px auto
  padding: 20px 0 100px 0

.timeline.small-top-margin
  padding-top: 5px

.timeline::before
  content: ''
  position: absolute
  top: 0
  left: calc(50% - 2px) // 50% - 1/2 width
  height: 100%
  width: 4px
  background: $timeline-line-color

.timeline-entry
  position: relative
  margin-top: -150px
  cursor: text
  pointer-events: none

  &.first
    margin-top: 0px

  &.short
    margin-top: -50px

  &.odd
    .timeline-description
      margin-left: 55%

.timeline-icon
  position: absolute
  left: 50%
  width: 40px
  height: 40px
  margin-left: -20px
  border: 4px solid $timeline-line-color
  border-radius: 50%
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4)
  text-align: center
  vertical-align: middle
  z-index: 1
  pointer-events: auto

  i
    color: $timeline-icon-color
    font-size: 20px

  .icon-wrapper
    display: flex
    width: 100%
    height: 100%
    align-items: center
    justify-content: center
    cursor: default

  img
    max-width: 20px
    max-height: 20px
    object-fit: contain

.timeline-description
  position: relative
  box-sizing: border-box
  width: 45%
  background-color: $card-background
  padding-top: 20px
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1)
  display: inline-block
  pointer-events: auto
  border: 1px solid $timeline-line-color

  &.highlighted
    border: 3px solid $timeline-highlight-color
    box-shadow: 0px 0px 10px 0px $timeline-highlight-glow-color
    
    &::after
      border-color: $timeline-highlight-color

  &::after
    background-color: $card-background
    border-color: $timeline-line-color

  button.define-target
    user-select: text // Fixes issue selecting defined terms in Firefox

  a
    text-decoration: underline

    &.define-target
      text-decoration: none

  i .define-target
      font-style: italic

  .entry-wrapper
    margin-left: 20px
    margin-right: 20px

  .archive-link
    font-size: 80%

  .entry-footer
    clear: both
    margin-top: 15px
    border-top: 1px solid $timeline-line-color
    background-color: $card-footer-background

  .collection-row, .tags
    display: flex
    padding-top: 5px
    font-style: italic
    font-size: 70%

    button
      font-style: italic
      color: $main-link-color

  .collection-row
    display: flex
    justify-content: space-between
    padding: 5px
    border-bottom: 1px solid transparentize($timeline-line-color, 0.5)

    a > i.fa-twitter
      color: $main-text-color

  .tags
    padding: 5px

    .fa-hashtag
      color: $timestamp-color
      font-size: 80%
      margin-right: 5px

    .tag-list
      white-space: nowrap
      text-overflow: ellipsis
      overflow: hidden

      &.theme
        flex-shrink: 0

      &:not(:first-child):before
        color: $timeline-line-color
        content: "|"
        padding: 0 5px

    .tag-group-right
      display: flex
      flex-wrap: wrap
      justify-content: flex-end
      flex-grow: 1
      min-width: 0
      padding-left: 20px

  h2, h2 > button
    font-weight: 900
    line-height: 110%
    color: $main-text-color
    margin: 5px 0
    -webkit-margin-before: 5px
    -webkit-margin-after: 5px

    a
      text-decoration: none
      color: $main-text-color

      &:hover
        text-decoration: none

  p, ul
    margin: 5px 0 10px 0
    -webkit-margin-before: 5px
    -webkit-margin-after: 10px

img
  &.clickable
    cursor: pointer

  &.on-dark
    // For images that show poorly on light mode -- adds dark bg
    padding: 5px
    background-color: $dark-card-background

  &.on-light
    // For images that show poorly on dark mode -- adds light bg
    padding: 5px
    background-color: $card-background

.timestamp-and-link-icons
  display: flex
  justify-content: space-between
  align-items: center
  font-size: 80%
  color: $timestamp-color

  i
    color: $timestamp-color

    &.starred-entry
      color: #FAB034

  ul
    display: flex
    padding: 0
    margin: 0

    li
      list-style: none

      &:not(:first-child)
        padding-left: 5px

  .timestamp
    font-style: italic

.permalink-popup
  display: inline
  margin-right: 5px
  font-family: $body-font
  color: $timestamp-color
  background-color: transparentize($card-background, 0.3)

.captioned-image
  clear: both

  .caption
    display: block
    line-height: 120%
    font-style: italic
    font-size: 90%
    margin-top: 10px

  .attribution-link
    font-size: 70%

  img
    width: 100%
    display: block
    object-fit: contain

  &.landscape
    max-width: 200px

  &.is-logo
    width: clamp(100px, 25%, 150px)
    text-align: center

.sub-entry
  clear: both
  margin-top: 30px

.generic-page
  width: 90%
  max-width: 800px
  margin: 0 auto
  padding-bottom: 20px

.longform-text
  line-height: 150%
  font-size: 18px

.sub-navigation-bar
  background-color: $filterbar-background
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1)

  .contents
    display: flex
    align-items: center
    width: 90%
    max-width: 1600px
    padding: 10px 0
    margin: 0 auto
    justify-content: space-between

    button.back-bar-item
      color: $accent
      cursor: pointer
      white-space: nowrap
      padding-right: 5px

    .back-bar-item
      flex: 1

      i.link-icon
        margin-right: 5px

      &.title-text
        flex: 3
        text-align: center

    button.back-bar-item:hover, button.back-bar-item:focus
      text-decoration: underline

    h3
      margin: 0

.generic-page, .timeline-body-text-wrapper
  a[href^="https://"], a[href^="http://"], a[href^="https://en.wikipedia.org/"]

    &::after
      color: $timestamp-color
      margin-left: 0.125em
      vertical-align: middle

  a[href^="https://"], a[href^="http://"]
    &::after
      content: "\f08e"
      font: var(--fa-font-solid)
      font-size: 0.625em
      margin-left: 0.25em

  a[href^="https://en.wikipedia.org/"]
    &::after
      content: "\f266"
      font: var(--fa-font-brands)
      font-size: 0.625em

  a[href^="https://web3isgoinggreat.com/"]
    &::after
      display: none

.sr-only
  position: absolute
  left: -10000px
  top: auto
  width: 1px
  height: 1px
  overflow: hidden

.clearfix
  clear: both

.space-between
  display: flex
  justify-content: space-between

.no-break
  white-space: nowrap

.centered
  margin-left: auto
  margin-right: auto

.help-text
  font-size: 90%
  font-style: italic

.indent
  margin-left: 20px

td.number
  text-align: right

.error-wrapper
  display: flex
  flex-direction: column
  max-width: 300px
  text-align: center
  margin: 50px auto 0 auto
  padding: 0 20px

  span
    margin-top: 20px

.show-on-focus
  position: absolute
  width: 1px
  height: 1px
  margin: 0
  overflow: hidden
  clip: rect(1px, 1px, 1px, 1px)

.show-on-focus:focus
  z-index: 20
  width: auto
  height: auto
  clip: auto
    // If show-on-focus gets used in more places, these styling rules can
    // be broken out into different styles.
  padding: 16px !important
  background-color: $accent !important
  color: $title-color !important
  top: 0
  left: 0

.timeline.dots
  padding-bottom: 10px

  &::before
    background: linear-gradient(180deg, $timeline-line-color 25%, $main-background 25%, $main-background 50%, $timeline-line-color 50%, $timeline-line-color 75%, $main-background 75%, $main-background 100%)
    background-size: 100% 16px

.load-top
  display: flex
  justify-content: center

  button, a.button
    margin: 10px 0
    background-color: $accent
    color: $title-color
    padding: 5px 10px
    border: 0
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4)
    cursor: pointer

    &:active, &:hover, &:focus
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4)

.timeline-entry.single .timeline-description:after
  display: none

.timeline-body-text-wrapper
  position: relative
  z-index: 2
  pointer-events: none

  code
    word-wrap: break-word

  :not(p, span)
    pointer-events: auto

.padding-right
  padding-right: 10px

// Glossary
.glossary-entry, .faq-entry
  margin-top: 20px

  dt
    font-weight: bold

  h3
    margin: 0

  &.highlighted
    background-color: $highlight-background
    padding: 5px

// Contribute
table
  width: 100%
  border: 1px solid $timeline-line-color
  border-collapse: collapse

  th, td
    border: 1px solid $timeline-line-color
    padding: 5px

  .estimate
    color: $timestamp-color

.donations-bar-wrapper
  margin-top: 20px
  margin-bottom: 20px
  overflow: hidden
  font-size: 70%
  white-space: nowrap
  text-align: right

  .donations-bar, .text-bar
    width: 100%
    max-width: 800px
    margin-left: auto
    margin-right: auto

    *
      float: left

  .donations-bar
    *
      height: 30px
      line-height: 30px
      padding: 0 2px

      span
        width: 100%
        text-align: right
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis

    .used-credits
      background-color: #C0C0C0

    .paid
      background-color: #CCCCCC

    .extra-credits
      background-color: #74C67A

    .extra-donations
      background-color: #39A96B

    .remaining-expenses
      background-color: #EEAAB0

  .text-bar
    *
      height: 20px
      padding: 4px 5px 4px 0
      border-right: 1px solid $timeline-line-color
      line-height: 1

      &.filler
        border-right: 0px

// What
.what-page
  h3, h4, ul
    margin-top: 0.5em
    margin-bottom: 0.5em

// Archive
.tweet-archive
  display: flex
  max-width: 1600px
  margin: 0 auto 20px auto
  padding: 0 10px

  .tweet, .tweet-assets
    max-width: 775px

    img
      width: 100%
      max-width: 100%
      display: block
      object-fit: contain

  .tweet-assets
    margin-left: 50px
    overflow-wrap: break-word

/* ICON COLORS */
.timeline-icon
  @each $name, $color in $icon-colors
    &.#{$name}
      background-color: $color

/* RESPONSIVENESS */
@media only screen and (min-width: #{$md-breakpoint + 1}px)
  .timeline-entry.even 
    .timeline-description:after
      right: -8px
      border-top-width: 1px
      border-right-width: 1px
    
    .timeline-description.highlighted:after
      right: -9px
      border-top-width: 3px
      border-right-width: 3px

  header.page-header.timeline-page
    min-height: 250px
    align-items: start

  .timeline-entry.single
    display: flex
    justify-content: center
    margin: 10px auto

    .timeline-icon
      position: static
      margin-right: 8px

    .timeline-description
      max-width: 1000px
      width: 80%

@media only screen and (max-width: #{$md-breakpoint}px) and (min-width: #{$xs-breakpoint + 1}px)
  .timeline-entry.even
    .timeline-description:after
      left: -8px
      border-bottom-width: 1px
      border-left-width: 1px
    
    .timeline-description.highlighted:after
      left: -9px
      border-bottom-width: 3px
      border-left-width: 3px

@media only screen and (min-width: #{$xs-breakpoint + 1}px)
  .timeline-description:after
    top: 14px
    content: ''
    transform: rotate(45deg)
    height: 14px
    width: 14px
    position: absolute
    border-width: 0
    border-style: solid
    box-sizing: border-box

  .timeline-entry.odd
    .timeline-description:after
      left: -8px
      border-bottom-width: 1px
      border-left-width: 1px

    .timeline-description.highlighted:after
      left: -9px
      border-bottom-width: 3px
      border-left-width: 3px

  .image-right
    width: clamp(150px, 40%, 400px)
    float: right
    padding: 10px 0 5px 10px

@media only screen and (max-width: #{$md-breakpoint}px)
  header.page-header
    h1
      font-size: 1.5em

    p
      font-size: 14px

    .constrain-width
      align-items: flex-end

  header.page-header.timeline-page
    justify-content: normal

    img.logo
      max-height: 200px

    li
      padding: 0 5px

  .timeline::before
    left: 0

  .timeline-icon
    left: 2px

  .timeline-entry,
  .timeline-entry.short
    margin-top: 1.5em

  .timeline-entry.odd .timeline-description,
  .timeline-entry.even .timeline-description
    margin-left: 3.125em

  .timeline-entry.single .timeline-description
    margin-left: 1.875em

  .timestamp-and-link-icons ul li:not(:first-child)
    font-size: 120%
    padding-left: 10px

  .timeline-description
    width: 90%

  .load-top
    justify-content: start

    button, a.button
      margin-left: 5%

  .lightbox-container
    width: 90%

  .tweet-archive
    flex-direction: column
    margin: 0
    padding: 0

    .tweet, .tweet-assets
      max-width: 100%

    .tweet-assets
      margin-left: 0

@media only screen and (max-width: #{$sm-breakpoint}px)
  header.page-header
    height: auto
    padding-top: 20px

    h1
      font-size: 1.5em

    p
      font-size: 16px

    .constrain-width
      align-items: center
      flex-direction: column-reverse

    .mobile-image-and-links
      display: flex
      justify-content: space-between
      flex-wrap: nowrap

      .mobile-image-wrapper
        display: flex
        flex-grow: 1
        justify-content: center
        align-self: flex-end

        img.logo
          margin-left: 0px
          width: 100%
          max-width: 100px

// Small mobile
@media only screen and (max-width: #{$xs-breakpoint}px)
  .captioned-image
    margin: 20px auto
    text-align: center

    img
      max-height: 400px

  .timeline
    width: auto
    margin-left: 5px

  .timestamp-and-link-icons
    margin-left: 15px

  .timeline-entry.even,
  .timeline-entry.odd
    .timeline-description
      margin-left: 0.625em
      padding-top: 0.625em
      width: calc( 100vw - 20px )

      .entry-wrapper
        margin-left: 0.625em
        margin-right: 0.625em

  .timeline:after
    display: none

  .timeline-icon
    width: 30px
    height: 30px
    margin-left: -5px
    border-width: 2px

    i
      font-size: 15px

    img
      max-width: 15px
      max-height: 15px

  .load-top
    button, a.button
      margin-left: 4px

.flex-between
  display: flex
  justify-content: space-between

.no-wrap
  white-space: no-wrap

#noscript
  margin: 20px auto 50px auto
  max-width: 400px
  width: 80%
  text-align: center

.sub-navigation-bar .contents
  font-size: 80%

  button.back-bar-item
    white-space: normal

@media (prefers-reduced-motion: reduce)
  html
    scroll-behavior: auto

// EMBED
.embed-wrapper
  .timeline-entry, .timeline-entry.single
    margin: 0
    justify-content: flex-start

    .timeline-description
      width: 100%
      margin: 0
    
  .timeline-icon
    display: none


// DARK MODE
@mixin mainDarkMode()
  main
    background-color: $dark-main-background

  header.page-header,
  header.page-header .header-content,
  footer.page-footer
    background-color: $dark-header-footer-background

    h1, h1 a, h1 button, p, ul
      color: $dark-header-footer-body-color

    img.logo
      filter: brightness(80%)

  header.page-header .header-content
    a
      border-bottom: 0.0625em dashed lighten($header-footer-background, 20%)
      color: $dark-header-footer-link-color

    h1 a, h1 button
      border-bottom: none

  header.page-header.timeline-page li:not(:first-child):before
    color: $dark-header-footer-body-color

  body,
  .timeline-description,
  .timeline-filter,
  .timeline-icon i,
  .content-wrapper,
  .attribution
    color: $dark-main-color

    h2,
    h2 > button,
    h2 > button a
      color: $dark-main-color

  a,
  .timeline-description a,
  .attribution a
    color: $dark-link-color

  .sub-navigation-bar
    background-color: $dark-filterbar-background
    color: $dark-filter-text

    .contents button.back-bar-item
      color: $dark-link-color

  .timeline-description
    background-color: $dark-card-background
    border-color: $dark-timeline-line-color

    &.highlighted
      border-color: $dark-timeline-highlight-color
      box-shadow: 0px 0px 10px 0px $dark-timeline-highlight-glow-color 

    h2
      button .permalink-popup
      color: $dark-main-color

      a
        color: $dark-main-color

    .entry-footer
      border-color: $dark-timeline-line-color
      background-color: $dark-card-footer-background

      button
        color: $dark-link-color

      .collection-row
        border-bottom-color: $dark-timeline-line-color

  .timeline::before
    background-color: $dark-timeline-line-color

  .timeline-icon
    border-color: $dark-timeline-line-color
    color: $dark-timeline-icon-color

    img
      filter: brightness(80%)

  .timeline-icon
    @each $name, $color in $icon-colors
      &.#{$name}
        background-color: darken($color, 20%)
  
  .load-top
    button, a.button
      color: $dark-timeline-icon-color
      background-color: darken($accent, 20%)

  .timeline.dots::before
    background: linear-gradient(180deg, $dark-timeline-line-color 25%, $dark-main-background 25%, $dark-main-background 50%, $dark-timeline-line-color 50%, $dark-timeline-line-color 75%, $dark-main-background 75%, $dark-main-background 100%)  

  .timeline-description
    &:after
      background-color: $dark-card-background
      border-color: $dark-timeline-line-color
      
    &.highlighted
      border-color: $dark-timeline-highlight-color 

      &::after
        border-color: $dark-timeline-highlight-color

  // Contribute
  table
    border-color: $dark-timeline-line-color

    th, td
      border-color: $timeline-line-color

  .donations-bar
    color: $main-text-color

  // Glossary
  .glossary-entry, .faq-entry
    &.highlighted
      background-color: $dark-highlight-background

.use-dark
  background-color: $dark-main-background
  @include mainDarkMode()
  @include navigationDarkMode()
  @include filtersDarkMode()
  @include fixedDarkMode()
  @include popoversDarkMode()
  @include chartsDarkMode()
  @include reactDateRangeDarkMode()

.use-system
  @media (prefers-color-scheme: dark)
    background-color: $dark-main-background
    @include mainDarkMode()
    @include navigationDarkMode()
    @include filtersDarkMode()
    @include fixedDarkMode()
    @include popoversDarkMode()
    @include chartsDarkMode()
    @include reactDateRangeDarkMode()